<template>
	<view v-if="detail">
		<swiper class="banner" :indicator-dots="true" >
			<swiper-item v-for="item in bannerList">
				<image :src="item" mode="widthFix"></image>
			</swiper-item>
		</swiper>
		<view class="text-center padding-tb">
			<view class="text-xxl">
				{{detail.name}}
			</view>
			<view class="text-df">
				{{detail.french}}
			</view>
		</view>
		<view class="flex justify-around">
			<view 
				v-for="(item,index) in detail.list" 
				:class="['text-center padding-sm tab',{active:index==gIdx}]" 
				@click="gIdx=index"
			>
				<view class="">{{item.spec}}</view>
				<view class="">({{item.weight}})</view>
				<view class="">{{item.edible}}</view>
			</view>
		</view>
		<view class="padding fs-28 u-border-bottom">
			￥{{detail.list[gIdx].price}}
		</view>
		<view class="padding fs-28 u-border-bottom">
			
			{{detail.list[gIdx].fittings}}
			<text class="margin-lr">{{detail.list[gIdx].size}}</text>
			
		</view>
		<view class="padding fs-28 u-border-bottom">
		</view>
		<view class="flex justify-around fixed padding-tb-sm">
			<button class="cu-btn bg-brown lg" type="default">加入购物车</button>
			<button class="cu-btn bg-yellow lg" type="default">立即购买</button>
		</view>
	</view>
</template>

<script setup>
import { computed, ref } from "vue";
import { cakeDetailGet } from '../../api/cake';
import {onLoad} from '@dcloudio/uni-app'
import { useGuard } from "../../hooks/guard";
const detail = ref(null)
onLoad(({id})=>{
	// console.log(id);
	cakeDetailGet(id).then(res=>{
		console.log(res);
		detail.value = res.data
	})
})

// 菜单
const gIdx = ref(0)
const bannerList = computed(()=>{
	console.log('bannerList');
	if(!detail){return []}
	let {list,url} = detail.value.list[gIdx.value].pic
	return list.map(item=>{
		return url+item.m
	})
})

//守卫弹窗
useGuard()
</script>

<style lang="scss">
.banner{
	height: 600upx;
	swiper-item{
		height: 600upx;
	}
	image{
		width: 100%;
		// height: 600upx;
	}
}
.tab{
	&.active{
		border-bottom: 4upx solid #fae456;
		background-color: #fae456;
	}
}
.cu-btn.lg{
	width: 46%;
}
</style>
